<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
    <head>
        <title>Life Game</title>
        <meta charset='utf-8'>
        <script  type="text/javascript" src="js/lifeGame.js"></script>
        <script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script>
        <script src="https://cdn.bootcss.com/fabric.js/2.2.4/fabric.min.js"></script>
        <style type="text/css">
      h1
      	{
      	color:rgb(39, 173, 96);
		font: 24px/30px microsoft yahei;
		margin: 0px 20px -10px;
		padding: 30px 70px 16px;
		text-align: center;
		font-size:40px;
     	 } 
        </style>
    </head>
    <body style="background:white;background-size: 100% 100%;text-align:center;">
		
            <h1>生命游戏</h1>
      <div style="margin:20px 50px 20px;padding-bottom:10px;border-bottom:1px solid #c1c1c1;float:left;width:502px">
         <fieldset>
    			<legend>控制中心</legend>
    					<fieldset>
  				<legend>游戏规则设置</legend> 
          			 细胞为生周围细胞数：<input type="text" value="3" id="lifelive" style="width:50px;margin-right:20px;"><br><br>
          			 细胞保持不变周围细胞数：<input type="text" value="2" id="lifeStay" style="width:50px;margin-right:20px;">
  				</fieldset>
      			<fieldset>
    			<legend>初始参数</legend>  
    				大小：<input type="text" value="40" id="lifeSize" style="width:50px;margin-right:20px;">
    				演化速度 ：<input type="text" value="1" id="lifeSpeed" style="width:50px;">s&nbsp;&nbsp;&nbsp;
    				<br><br>
    			
					<div id="percent">初始细胞百分比：<input type="text" value="30" id="lifeLivePercent" style="width:50px;margin-right:20px;">%</div>
					<br>
					
				 	<input type="button" value="开始" style="width:70px;" onclick="javascript:restartLifeGame()">
				  	<input type="button" id="stop" value="暂停" style="width:70px;" onclick="javascript:pauseLife()">
  				</fieldset>
  		
  				<fieldset>
    			<legend>演化结果</legend> 
          			  剩余生命：<span id="remainLifes" style="display:inline-block;width:50px;color:red;">0</span>
           			 进化次数：<span id="period" style="display:inline-block;width:40px;color:red;">0</span>
  				</fieldset>
 			</fieldset>
     </div>
     <div style="margin:20px 50px 20px;padding-bottom:10px;border-bottom:1px solid #c1c1c1;float:right;width:502px">
        <canvas id="canvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
      </div>
	
        <script type="text/javascript">
            var life;
            var lifeTimer = 0;
            var canvas = new fabric.Canvas('canvas');
           
            canvas.renderOnAddRemove = false;
            var lifes = [];
            function initLifeGame()
            {
                var rect = new fabric.Rect({
                    top : 0,
                    left : 0,
                    width : 450,
                    height : 450,
                    fill : 'white',
                    selectable: false, 
                    strokeWidth: 0,
                    stroke: '#0038FF'

                });
                canvas.add(rect);
                canvas.renderAll();
            }
				
            function restartLifeGame()
            {
                var size = parseInt(document.getElementById('lifeSize').value);
                if (isNaN(size) || size <= 0) {
                    alert('请输入正确数值');
                    return;
                }

                if (lifeTimer != 0)
                    clearInterval(lifeTimer);
                canvas.clear();
                initLifeGame();
                beginLife(size, size);
            }
			
            $("#lifeSpeed").change(
            	function()
            	{
            	 clearInterval(lifeTimer);
				var lifeSpeed = $("#lifeSpeed").val()
				 if (isNaN(lifeSpeed) || lifeSpeed <= 0) 
				 {
                    alert('请输入正确数值');
                    return;
                }
				lifeTimer = setInterval(refreshLife, lifeSpeed*1000);
					})
				
			$("#mode").change(function()
						{
					var mode = $("#mode").val();
					
					if(mode=='random')
					{
						$("#percent").show();
					}else{
						$("#percent").hide();
					}
						})
		
            function beginLife(row,col)
            {
            	var live = $("#lifelive").val();
            	var stay = $("#lifeStay").val();
                life = new LifeGame(row,col,live,stay);
                var lifeLivePercent = $("#lifeLivePercent").val();
                life.initRandom(lifeLivePercent);
                  var width  = 450/life.col;
                  var height = 450/life.row;
                  for(var i=0;i<life.row;i++) {
                      lifes[i] = [];
                      for(var j=0;j<life.col;j++) {
                        lifes[i][j] = new fabric.Circle({
                        	 top:    i*height,
                             left:   j*width,
                             radius:width/2,
                             fill:   'rgb(39, 173, 96)',
                             selectable: false,
                             stroke: 'rgba(100,200,200,0.5)',
                             strokeWidth: 1,
                        })
                        canvas.add(lifes[i][j]);
                      }
                  }
                refreshLife(); 
                var lifeSpeed = $("#lifeSpeed").val()
				lifeTimer = setInterval(refreshLife, lifeSpeed*1000);
            }

            function refreshLife()
            {
                drawLife();
                document.getElementById('remainLifes').innerText = life.remainLifes;
                document.getElementById('period').innerText = life.period;
                life.nextAround();
            }

            function drawLife()
            {
                for(var i=0;i<life.row;i++) {
                    for(var j=0;j<life.col;j++) {
                        if (life.isAlive(i,j))  {
                           lifes[i][j].visible = true;
                        } else {
                           lifes[i][j].visible = false;
                        }
                    }
                }
                canvas.renderAll();
            }


            function pauseLife()
            {
            	if($("#stop").val()=='暂停')
            	{
            		$("#stop").attr("value",'继续');
            		clearInterval(lifeTimer);
            	}
            	else
            	{
            		$("#stop").attr("value",'暂停');
            		clearInterval(lifeTimer);
    				var lifeSpeed = $("#lifeSpeed").val()
    				 if (isNaN(lifeSpeed) || lifeSpeed <= 0) {
                        alert('请输入正确数值');
                        return;
                    }
    				lifeTimer = setInterval(refreshLife, lifeSpeed*1000);
            	}
                
            }

        </script>
</body>
</html>
